<template>
	<view class="trendLayout" :animation="animationBounceInUp">
		<view class="trendLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ tf_title }}
				</view>
				<view class="tleft_echart">
					<uni-echarts ref="echartstl" :option="optionTTLValue" canvasId="echartstl"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="trendRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ tr_title }}
				</view>
				<view class="trend-right-container" v-if="true">
					<div class="blockLayout" id="visualization-newwind-div">
						<img @load="resize" src="http://portal.xumengte.com/homeImg/new2.png">
						<template v-for="i in 10">
							<!--斜的-->
							<template v-if="i==5 || i==6 || i==9 || i==10">
								<div class="waveDiv" :id="'visualization-newwind-div'+(i-1)">
									<img :src="'http://portal.xumengte.com/icons/wind_wave_'+((i==5||i==6)?'yel':'gre')+'.gif'"
										:class="{'rotate25':i==5|| i==6,'rotate155':i==9|| i==10}" />
								</div>
							</template>
							<template v-else>
								<div class="waveDiv waveborder" :class="{'rotate':i>6}"
									:id="'visualization-newwind-div'+(i-1)">
									<img
										:src="'http://portal.xumengte.com/icons/wind_wave_'+(i>6?'gre':'yel')+'.gif'" />
								</div>
							</template>
						</template>
						<!--2个风扇-->
						<template v-for="i in 2">
							<div class="fanDiv" :class="{animation0:i==1,animation1:i==2}"
								:id="'visualization-fanDiv'+i">
								<img src="http://portal.xumengte.com/homeImg/new3.png">
							</div>
						</template>
						<!--2个风扇-->
						<template v-for="(item,i) in textData">
							<div class="textDiv" :id="'visualization-textDiv'+i" v-if="i<4">
								<div>{{textData2[i]}}温度</div>
								<div>
									<div class="value">{{item}}</div> ℃
								</div>
							</div>
						</template>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionTRLValue
	} from "@/common/trend_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				tf_title: '新风能耗数据(最近24小时)',
				tr_title: '新风运行状态图',
				textData: [25.3, 25.9, 24.1, 22.2],
				textData2: ["新风", "送风", "回风", "排风"],
				optionTTLValue: {},
				screenFont: 12,
				isOpen: true,
				animationBounceInUp: {},
				sDataArray: [0, 0, 0, 0, 0],
				xDataArray: [1, 2, 3, 4, 5],

			}
		},
		created() {
			let that = this;
			uni.$on('refreshTemp', (res) => {
				let temp = res.temp;
				that.realData();
			})
		},
		beforeDestroy() {
			console.log('beforeDestroy==>>');
			uni.$off('refreshTemp')
		},
		mounted() {
			let that = this;
			let trendIndex = 1;
			this.optionTTLValue = optionTRLValue;
			this.$nextTick(() => {

			});
			// 隐藏动画节省开销
			// this.animation = uni.createAnimation({
			// 	duration: 2000,
			// 	timingFunction: "ease"
			// })
			// this.animation.top(320);
			// this.animation.translateY(-320).step({
			// 	duration: 1000
			// })
			// this.animationBounceInUp = this.animation.export()
			if (store.state.hasLogin) {
				this.logMulti()
			}
		},
		methods: {
			switchFan(index) {
				this.isOpen = !this.isOpen
				let dom = document.getElementById("visualization-fanDiv" + index)
				if (this.isOpen) {
					dom.classList.add("animation" + index);
				} else {
					dom.classList.remove("animation" + index);
				}
			},
			resize() {
				let width = 480 //原图宽度
				let height = 180 //原图高度

				let dom = document.getElementById("visualization-newwind-div")
				let realHeight = parseInt(dom.clientHeight) //实际高度
				let realWidth = parseInt(dom.clientWidth)

				let offset = [
					[28, 6], //1排1横黄
					[112, 260], //2排4横黄
					[116, 336], //2排5横黄
					[116, 420], //2排6横黄
					[40, 102], //1排2斜的黄色
					[116, 192], //2排3斜的黄色

					[28, 258], //1排4横绿
					[116, 8], //2排1横绿
					[40, 192], //1排3斜的绿色
					[106, 100], //2排2斜的绿色
					[122, 64], //左边风扇
					[122, 388], //右边风扇
					[30, -60], //新风温度
					[116, 488], //进风温度
					[28, 328], //回风温度
					[122, -60] //排风温度
				]

				for (let i = 0; i < offset.length; i++) {
					let offsetTop = offset[i][0] //原图top
					let offsetLeft = offset[i][1] //原图left
					let left = offsetLeft * realWidth / width
					let top = offsetTop * realHeight / height

					if (i > 11) {
						//4个文字
						dom = document.getElementById("visualization-textDiv" + (i - 12))
					} else if (i > 9) {
						//2个风扇
						dom = document.getElementById("visualization-fanDiv" + (i - 9))
					} else {
						dom = document.getElementById("visualization-newwind-div" + i)
					}
					// console.log(top,",,,",left)
					if (dom) {
						dom.style.top = top + "px"
						dom.style.left = left + "px"
					}
				}
			},
			realData() {
				let that = this;
				let postData = {
					deviceIds: 'DLPLCNEWWIND1',
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/realData', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						let dlpstr = resultData.DLPLCNEWWIND1;
						let dlpObj = JSON.parse(dlpstr);
						let valsArray = dlpObj.vals;
						that.textData = valsArray;
						console.log('valsArray==>>', valsArray);
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
			logMulti() {
				let that = this;
				let postData = {
					timeType: 'hour', //最近一周
					startTime: moment().startOf('hour').add(-24, 'hour').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('hour').format(DATE_TIME_FORMAT),
					projectId: $config.pcode,
					deviceId: 'DL-ADL400-26,DL-ADL400-25',
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logMulti', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						if (resultData && resultData[0]) {
							console.log(resultData, '**************res*******************')
							let xDataArray = resultData[0].range.map((item) => {
								return item.substring(11) + '时';
							});
							let sData1Array =
								resultData[0].data.length > 0 ?
								resultData[0].data.map((item) => {
									if (item) {
										return item.power?.toFixed(2)
									}
									return item?.slice(-1)[0]?.power?.toFixed(2) || 0;
								}) : [0, 0, 0, 0, 0, 0];
							let sData2Array =
								resultData[1].data.length > 0 ?
								resultData[1].data.map((item) => {
									if (item) {
										return item.power?.toFixed(2)
									}
									return item?.slice(-1)[0]?.power?.toFixed(2) || 0;
								}) : [0, 0, 0, 0, 0, 0];
							that.optionTTLValue = {
								...that.optionTTLValue,
								series: [{
									...that.optionTTLValue.series[0],
									data: sData1Array
								}, {
									...that.optionTTLValue.series[1],
									data: sData2Array
								}],
								xAxis: [{
									...that.optionTTLValue.xAxis[0],
									data: xDataArray
								}]
							};
							
						}
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
		}
	}
</script>
<style>
	@import 'index.css';
</style>
